* {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}


/* 导航栏部分 */

#bar {
    width: 100%;
    height: 60px;
    background-color: black;
    ul {
        li {
            width: 150px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            float: left;
            a {
                text-decoration: none;
                color: white;
                font-size: 18px;
                &:hover {
                    color: yellowgreen;
                }
            }
            .ul_2 {
                display: none;
                position: relative;
                z-index: 5;
            }
        }
        >li:hover .ul_2 {
            display: block;
        }
        div {
            position: absolute;
            right: 0;
        }
    }
}


/*选项卡*/

#img {
    width: 100%;
    height: 600px;
    background-image: url(../scss练习/img/带字横kv.jpg);
    background-size: cover;
    position: relative;
    input {
        display: none;
    }
    label {
        display: inline-block;
        width: 30px;
        height: 30px;
        background-color: aquamarine;
        border-radius: 50%;
        text-align: center;
        line-height: 30px;
        margin-left: 10px;
        position: relative;
        z-index: 5;
        top: 500px;
    }
    div {
        width: 100%;
        height: 600px;
        background-color: blueviolet;
        position: absolute;
        top: 0px;
        z-index: 1;
        background-size: cover;
    }
    #img1:checked+label,
    #img2:checked+label,
    #img3:checked+label,
    #img4:checked+label,
    #img5:checked+label {
        background-color: coral;
    }
    #img1:checked~div {
        background-image: url(../scss练习/img/WechatIMG449PC.jpg);
    }
    #img2:checked~div {
        background-image: url(../scss练习/img/Hero_desktop\ 2.jpg);
    }
    #img3:checked~div {
        background-image: url(../scss练习/img/LV_7-8-anteriore.jpg);
    }
    #img4:checked~div {
        background-image: url(../scss练习/img/WechatIMG449PC.jpg);
    }
    #img5:checked~div {
        background-image: url(../scss练习/img/LV_7-8-anteriore.jpg);
    }
}